$(function () {
  /* 
  
  1 打开页面的时候 发送请求 获取英雄数据  显示页面 
  2 给按钮绑定点击事件
    1 获取到输入框的值
    2 拼接参数 
    3 再次发送请求 。。。

  3 删除功能
    1 找标签 绑定事件 
    2 事件触发了  获取到被点击的元素的id ！！ 
    3 发送请求 完成删除
    4 自动去刷新 页面 
      再次发送请求 获取最新的数据 页面更新


  4 新增
    1 给 “添加英雄”  绑定点击事件
    2 事件触发了 弹出一个窗口 bootstrap内的技术！！ 
    3 在窗口内  数据的填写 （名称、性别、头像-写死空字符串）

  5 绑定 “提交”  绑定点击事件
    1 获取 表单中的值   （名称、性别、头像-写死空字符串）
    2 拼接参数 发送请求 完成 新增
    3 重置表单  关闭 提示框 刷新页面。。。。。

  6 都是建议 主要的业务 写完毕了  再去补上 表单验证。 提示

  7 修改英雄 头像
    1 给 上传头像 按钮 绑定事件 onchange  .abs
    2 在 onchange 事件内部
      1 获取文件对象
      2 new formData对象
      3 使用$.ajax 完成头像的上传
      4 接口上传完毕 响应的 头像在线地址

    3  找到当前要修改的元素的 id 和 头像在线地址  {id,img}
      调用 更新英雄的 接口  
    4 完成英雄的更新了。  调用 获取数据的接口 刷新列表！！ 



  */



  // 1 发送请求 获取数据 渲染页面
  function renderHeroList(heroName) {
    $.get("http://127.0.0.1:3001/getHeroList", { heroName }, (res) => {
      const list = res.data;

      let html = '';
      list.forEach(item => {
        html += `
        <tr>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.gender}</td>
        <td><img src="${item.img}" alt=""></td>
        <td>
          <button class="btn btn-warning rea">上传头像 <input data-id="${item.id}" type="file" class="abs" /> </button>
          <button data-id="${item.id}" class="btn btn-danger btn-delete">删除</button>
        </td>
      </tr>
        `;
      });
      $("#main-tbl tbody").html(html);
    })
  }

  renderHeroList(""); // 1 发送请求 获取数据 渲染页面



  // 2 给按钮绑定点击事件 
  $(".hero-search").click(function () {
    const heroName = $(".hero-name").val();
    renderHeroList(heroName);
  })


  // 3 删除按钮绑定点击事件 
  // jq  但凡碰到 动态生成的标签 要绑定事件的时候 => 事件委托 
  // 事件委托 
  // 绑定事件
  // 就找一个一直存在的父元素 给直接绑定点击事件 
  // 触发的时候 得要确保一个子元素存在 才能触发 ！！！ 

  $("#main-tbl").on("click", ".btn-delete", (e) => {

    // console.log(e.target.parentNode.parentNode.children[0].innerText);// 不优雅！！ 
    // console.log(e.target.dataset.id);
    // console.log($(e.target).data("id"));

    const id = $(e.target).data("id");

    $.get("http://127.0.0.1:3001/delHeroById", { id }, (res) => {
      console.log(res);
      renderHeroList();
    })

  })


  // 4 给 “添加英雄”  绑定点击事件
  $("#addHero").click(function () {
    // 4.1 显示模态框
    $('#myModal').modal('show')

  })

  // 5 给 “保存” 按钮 绑定点击事件
  $("#save-btn").click(function () {
    // 姓名 和性别
    const name = $("#name").val();
    const gender = $("#gender").val();
    const img = "";// 暂时先写死

    // 添加 英雄 接口 三大要素
    // url 请求方式  请求参数
    const url = "http://127.0.0.1:3001/addHero";
    $.post(url, { name, gender, img }, (res) => {
      // 重置表单
      $("#name").val("");
      $("#gender").val("女");

      // 关闭提示框
      $('#myModal').modal('hide');

      //  重新获取数据 和渲染页面
      renderHeroList("")
    })




  })


  // 6 给 "上传头像"  按钮 绑定 onchange  
  // 事件委托！！！！ 
  $("#main-tbl").on("change", ".abs", function () {

    const that = this;


    // 6.1 获取文件对象
    const file = this.files[0];
    // 6.2 创建formData
    const formdata = new FormData();

    // 6.3 formdata  和文件 结合
    formdata.append("file_data", file);

    // 6.4 ajax post请求 发送文件
    $.ajax({
      url: "http://127.0.0.1:3001/uploadFile",
      type: "post",
      data: formdata,
      contentType: false,
      processData: false,
      success: function (res) {
        // console.log(res);
        const src = res.src;

        // 7.1 获取要修改的英雄 id
        // console.log($(that).data("id"));
        const id = $(that).data("id")

        // 7.2 拼接参数
        const params = { id, img: src };

        // 7.3 调用 更新英雄的接口
        $.post("http://127.0.0.1:3001/updateHero", params, function (res2) {
          console.log(res2);
          // 8 重新发送请求 完成 更新即可 
          renderHeroList();

        })

      }
    })


  })


})